export const baseUsage = `
import {PhForm} from 'phoeon'
interface Form{
    type:{
        type:String //表格的样式风格<none 纯白|plain 灰白>
    }
}
`;
export const script = `<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import {
    PhForm,
    PhFormSubmit,
    PhValidator,
    PhFormTextarea,
    PhFormInput,
    PhFormSelect,
    PhFormSwitch,
    PhFormColor,
    PhFormDate,
    PhFormCheckbox,
    PhFormRadio,
    PhOption,
    PhCheckboxItem,
    PhRadioItem,
    PhButton,
    PhButtonGroup,
    
} from 'phoeon'

export default defineComponent({
    components:{
        PhForm,
        PhFormSubmit,
        PhValidator,
        PhFormTextarea,
        PhFormInput,
        PhFormSelect,
        PhFormSwitch,
        PhFormColor,
        PhFormDate,
        PhFormCheckbox,
        PhFormRadio,
        PhOption,
        PhCheckboxItem,
        PhRadioItem,
        PhButton,
        PhButtonGroup,
        
    },
    setup() {
      const formdata = reactive({
          account:"",
          gender:0,
          email:"",
          profile:"",
          color:"#FF00FF",
          birth:"",
          married:false,
          uni:1,
          unis:[{
              value:1,
              text:"宁夏大学"
          },{
              value:2,
              text:"厦门大学"
          },{
              value:3,
              text:"宁波大学"
          },{
              value:4,
              text:"清华大学"
          },{
              value:5,
              text:"北京大学"
          }],
          sx:2,
          sxs:[{
              value:1,
              text:"康家沟小学"
          },{
              value:2,
              text:"张家界小学"
          },{
              value:3,
              text:"贵族小学"
          }],
          num:[2,7],
          nums:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
          pro:[1],
          pros:[{
              value:1,
              text:"老师",
          },{
              value:2,
              text:"学生",
          }]
      })  
      const onSubmit = (e:unknown)=>{
          console.log("bingo ",e)
      }
      const onValidFailed = (e:unknown)=>{
          console.log(e,'valid failed')
      }
      const onAccountChange = (v:string)=>{
          console.log(v)
      }
      const onColorChange = (v:string)=>{
          formdata.color = v
      }
      const onBirthChange = (v:string)=>{
          formdata.birth = v
      }
      const onProChange = (v:number[])=>{
          formdata.pro = v
      }
      const onNumChange = (v:number[])=>{
          formdata.num = v
      }
      const onUniChange = (v:number)=>{
          console.log(v)
          formdata.uni = v
      }
      const onSxChange = (v:number)=>{
          console.log(v)
          formdata.sx = v
      }
      const onGenderChange = (v:number)=>{
          formdata.gender = v
      }
      const onMarriageChange = (v:boolean)=>{
          console.log(v)
          formdata.married = v
      }
      
        const formStyle=ref<string|null>(null)
        const onShiftFormStyle = ()=>{
            formStyle.value = formStyle.value?null:"plain"
        }
      return {
          ...toRefs(formdata),
          formStyle,
          onShiftFormStyle,
          onSubmit,
          onValidFailed,
          onAccountChange,

          onColorChange,
          onBirthChange,
          onProChange,
          onNumChange,
          onUniChange,
          onSxChange,
          onGenderChange,
          onMarriageChange,
      }
    },
})
</script>
`;
export const template = `<ph-form style="width:500px">
<ph-validator>
    <ph-form-input :value="account" label="账户名" placeholder="required" :validators="['required']" @ph-change="onAccountChange"/>
    <ph-form-input :value="email" label="邮箱" placeholder="email" :validators="['email']"/>
    <ph-form-input :value="profile" label="个人主页" :validators="['url']"/>
    <ph-form-input placeholder="测试警用" label="禁用" :disabled="true"/>
    <ph-form-select label="幸运数字" :value="num" @ph-change="onNumChange" :multiple="true" :validators="['required']">
        <ph-option :value="opt" v-for="opt in nums" :key="opt">{{opt}}</ph-option>
    </ph-form-select>
    <ph-form-switch label="婚否" :value="married" @ph-change="onMarriageChange"/>
    <ph-form-color label="喜欢的颜色" :value="color" @ph-change="onColorChange" :disabled="false" :validators="['color']"/>
    <ph-form-color label="禁止的颜色" :value="color" @ph-change="onColorChange" :disabled="true" :validators="['color']"/>
    <ph-form-date label="生日" :value="birth" @ph-change="onBirthChange" :validators="['required']"/>
    <ph-form-date label="死日" :value="birth" @ph-change="onBirthChange" :disabled="true"/>
    <ph-form-select label="大学" :value="uni" @ph-change="onUniChange" align="center" :validators="['required']">
        <ph-option :value="opt.value" v-for="opt in unis" :key="opt.value">{{opt.text}}</ph-option>
    </ph-form-select>
    <ph-form-select label="职业" :value="pro" @ph-change="onProChange" :multiple="true" :disabled="true">
        <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{opt.text}}</ph-option>
    </ph-form-select>
    <ph-form-checkbox label="读过的小学" :value="sx" @ph-change="onSxChange" :validators="['required']">
        <ph-checkbox-item v-for="item in sxs" :value="item.value" :key="item.value">{{item.text}}</ph-checkbox-item>
    </ph-form-checkbox>
    <ph-form-checkbox label="禁止全部选项" :value="sx" @ph-change="onSxChange" :disabled="true">
        <ph-checkbox-item v-for="item in sxs" :value="item.value" :key="item.value">{{item.text}}</ph-checkbox-item>
    </ph-form-checkbox>
    <ph-form-checkbox label="禁止某一个" :value="sx" @ph-change="onSxChange">
        <ph-checkbox-item :disabled="item.value==2" v-for="item in sxs" :value="item.value" :key="item.value">{{item.text}}</ph-checkbox-item>
    </ph-form-checkbox>
    <ph-form-radio label="最爱小学单选" :value="fsx" @ph-change="onFsxChange" :validators="['required']">
        <ph-radio-item :disabled="item.value==2" v-for="item in sxs" :value="item.value" :key="item.value">{{item.text}}</ph-radio-item>
    </ph-form-radio>
    <ph-form-textarea label="个人介绍" placeholder="那天夕阳下的蹦跑" :validators="['required']"/>
    <ph-button-group :container="true" :col="true">
        <ph-form-submit :block="true" type="primary" @submit="onSubmit" @valid-failed="onValidFailed">提交</ph-form-submit>
        <ph-button :block="true" type="success">登陆</ph-button>
    </ph-button-group>
</ph-validator>
</ph-form>

`;
